<template>
  <div class="app-container">
    <div class="tree-main">
      <el-tree
        class="tree"
        default-expand-all
        highlight-current
        :expand-on-click-node="false"
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
      >
        <span slot-scope="{ node }" class="custom-tree-node">
          <span>
            <svg-icon style="font-size: 18px" :icon-class="node.childNodes.length > 0 ? 'wenjianjia' : 'a-shebei'">
            </svg-icon>
            {{ node.label }}
          </span>
        </span>
      </el-tree>

      <div class="main">
        <el-form class="searchForm" :inline="true" :model="queryForm" label-width="90px">
          <el-form-item label="菜单名称">
            <el-input v-model="queryForm.menuName"> </el-input>
          </el-form-item>
          <el-form-item label="菜单编号">
            <el-input v-model="queryForm.menuCode"> </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="pageChange(1)">查询</el-button>
            <el-button type="info" :disabled="queryForm.parentid == 0" @click="onAdd">添加</el-button>
          </el-form-item>
        </el-form>
        <el-table
          v-loading="loading"
          :data="tableData"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          height="600"
          stripe
          border
          style="width: 100%"
        >
          <el-table-column :resizable="false" label="操作" width="80" fixed>
            <template slot-scope="scope">
              <div class="edit-tooltip">
                <el-tooltip effect="dark" content="修改" placement="bottom">
                  <el-button type="text" @click="onEdit(scope.row)">
                    <svg-icon style="fill: #f46c6c" icon-class="a-xiugai"></svg-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip effect="dark" content="删除" placement="bottom">
                  <el-button type="text" @click="onDelete(scope.row)">
                    <svg-icon style="fill: #f46c6c" icon-class="butongyi"></svg-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="menucode" label="菜单编号" min-width="120" />
          <el-table-column :resizable="false" prop="menuname" label="菜单名称" min-width="100" />
          <el-table-column :resizable="false" prop="url" label="页面地址" min-width="120" />
          <el-table-column :resizable="false" prop="parentid" label="父级id" min-width="120" />
          <el-table-column :resizable="false" prop="isneed" label="是否显示" min-width="120">
            <template slot-scope="scope">
              <span>
                {{ scope.row.isneed == 0 ? '否' : '是' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="orderno" label="排序" min-width="120" />
        </el-table>
        <el-pagination
          style="margin: 10px"
          :current-page="queryForm.pagenum"
          :page-sizes="[20, 50, 100]"
          :page-size="queryForm.pagesize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>
    </div>
    <el-dialog
      destroy-on-close
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="600px"
      @close="onClose"
    >
      <el-form ref="form" :model="form" :rules="formRules" label-width="120px" :inline="false">
        <el-form-item label="菜单编号" prop="menucode">
          <el-input v-model="form.menucode" />
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuname">
          <el-input v-model="form.menuname" />
        </el-form-item>
        <el-form-item label="URL" prop="url">
          <el-input v-model="form.url" />
        </el-form-item>
        <el-form-item label="父级id" prop="parentid">
          <el-input v-model="form.parentid" disabled />
        </el-form-item>
        <el-form-item label="SubSys" prop="subsys">
          <el-input v-model="form.subsys" disabled />
        </el-form-item>
        <el-form-item label="是否显示" prop="isneed">
          <el-select v-model="form.isneed">
            <el-option label="是" :value="1">是</el-option>
            <el-option label="否" :value="0">否</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="序号" prop="orderno">
          <el-input v-model.number="form.orderno" />
        </el-form-item>
        <el-divider />
        <el-form-item label="IsQuick" prop="isquick">
          <el-input v-model.number="form.isquick" />
        </el-form-item>
        <el-form-item label="HasChild" prop="haschild">
          <el-input v-model="form.haschild" />
        </el-form-item>
        <el-form-item label="IsExternal" prop="isexternal">
          <el-input v-model="form.isexternal" />
        </el-form-item>
        <el-form-item label="IsA9Common" prop="isa9common">
          <el-input v-model="form.isa9common" />
        </el-form-item>
        <el-form-item label="ORACLE连接标识：" prop="connstroracle">
          <el-input v-model="form.connstroracle" />
        </el-form-item>
        <el-form-item label="SQL连接标识" prop="connstrsql">
          <el-input v-model="form.connstrsql" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="info" @click="onSubmit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { QueryList, QueryPageList, QueryInfoByID, Save, Del } from '@/api/settings/caidan'
import { QueryList, QueryPageList, Save, Del } from '@/api/settings/caidan'
export default {
  name: 'Caidan',
  data() {
    return {
      queryForm: {
        menuname: '',
        menucode: '',
        parentid: 0,
        pagenum: 1,
        pagesize: 20,
        isneed: ''
      },
      total: 0,
      tableData: [],
      loading: true,
      visible: false,
      title: '菜单管理',
      formRules: {
        menuname: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
        menucode: [{ required: true, message: '请输入菜单编号', trigger: 'blur' }],
        parentid: [{ required: true, message: '必须拥有父级id', trigger: 'blur' }],
        isneed: [{ required: true, message: '是否显示是必填项', trigger: 'blur' }],
        isquick: [{ type: 'number', message: 'IsQuick必须为数字值' }],
        orderno: [{ type: 'number', message: '序号必须为数字值' }]
      },
      form: {
        id: 0,
        menucode: '',
        menuname: '',
        url: '',
        parentid: '',
        subsys: '',
        isneed: 1,
        orderno: 0,
        isquick: 0,
        haschild: '',
        isexternal: '',
        isa9common: '',
        connstroracle: '',
        connstrsql: ''
      },
      data: [],
      defaultProps: {
        children: 'children',
        label: 'menuname'
      }
    }
  },
  created() {
    this.getTree()
    this.onSearch()
  },
  methods: {
    async getTree() {
      const { content } = await QueryList({})

      console.log('content', content)
      var res = []
      content.forEach(item => {
        if (item.menuname != null) {
          res.push(item)
        }
      })
      this.datas = res
      const result = this.turnData(content, '0')
      this.data = result
    },
    // 树状结构数据转换
    turnData(arr, pid) {
      const res = []
      arr.forEach(item => {
        if (item.parentid == pid) {
          const children = this.turnData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          res.push(item)
        }
      })
      return res
    },
    sizeChange(size) {
      this.queryForm.pagesize = size
      this.onSearch()
    },
    pageChange(page) {
      this.queryForm.pagenum = page
      this.onSearch()
    },
    onSearch() {
      this.loading = true
      QueryPageList(this.queryForm)
        .then(result => {
          console.log(result)
          if (result.success) {
            var content = result.content || []
            this.total = content.total
            this.tableData = content.list.sort((a, b) => a.orderno - b.orderno)
          } else {
            this.$message.error(result.message)
          }
          this.loading = false
        })
        .catch(err => {
          console.log(err)
        })
    },
    onEdit(data) {
      console.log(data)
      this.form.id = data.id
      this.form.menucode = data.menucode
      this.form.menuname = data.menuname
      this.form.url = data.url
      this.form.parentid = data.parentid
      this.form.subsys = data.subsys
      this.form.isneed = data.isneed
      this.form.orderno = data.orderno
      this.form.isquick = data.isquick
      this.form.haschild = data.haschild
      this.form.isexternal = data.isexternal
      this.form.isa9common = data.isa9common
      this.form.connstroracle = data.connstroracle
      this.form.connstrsql = data.connstrsql
      this.visible = true
    },
    onDelete(data) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const del = await Del({ id: data.id })
          console.log(del)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.onSearch()
          this.getTree()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    onAdd() {
      this.form.id = 0
      this.form.isneed = 1
      this.form.parentid = this.queryForm.parentid
      this.visible = true
    },
    onClose() {
      this.form = {
        id: 0,
        menucode: '',
        menuname: '',
        url: '',
        parentid: '',
        subsys: '',
        isneed: '',
        orderno: '',
        isquick: '',
        haschild: '',
        isexternal: '',
        isa9common: '',
        connstroracle: '',
        connstrsql: ''
      }
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          Save(this.form)
            .then(result => {
              if (result.success) {
                if (this.form.id) {
                  this.$message.success('修改成功')
                } else {
                  this.$message.success('添加成功')
                }

                this.visible = false
                this.getTree()
                this.onSearch()
              } else {
                return this.$message.error(result.message)
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          return false
        }
      })
    },
    handleNodeClick(data, index, event) {
      this.queryForm.parentid = data.id
      this.onSearch()
    },
    clickdata(node, data) {
      console.log(node)
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  height: 30px;
  line-height: 30px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 0 5px;
  padding: 0 10px;
  display: inline-block;
  letter-spacing: 0.5px;
}

.tree-main {
  display: flex;
  height: 100%;

  .tree {
    width: 250px;
    height: calc(100vh - 200px);
    overflow-y: auto;
  }

  .main {
    width: calc(100% - 250px);
  }
}
.el-select {
  width: 440px !important;
}
</style>
